<script setup>
import { ref, reactive, toRefs } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import List from '@/components/List/index.vue'

const data = reactive({
    table: false,
    drawer: false,
    dialog: false,
    loading: false,
    active: 0,
    formLabelWidth: '80px',
    timer: null,
    registerNewDeviceForm1: {
        id: ''
		
    }
})

const ruleFormRef = ref()

const rules = reactive({
    id: [{ required: true, message: '请输入ID！', trigger: 'blur' },],
})

const next = () => {
    if (active.value < 3) { active.value = active.value + 1 }
}
const before = () => {
    if (active.value > 0) { active.value = active.value - 1 }
    console.log('before', active)
}

const submit = async () => {

    if (!ruleFormRef.value) return
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            return new Promise(resolve => {
            api.post('api/equipment/equipmentUpdate', {
                id: data.registerNewDeviceForm1.id
                    
            }).then(res => {
                if (res.c === 2) {
                    ElMessage({
                        message: '删除成功',
                        type: ''
                    })
                } else {
                    ElMessage({
                        message: res.m,
                        type: 'error'
                    })
                }
                    
            })
        })
        } else {
            ElMessage({
                type: 'error',
                message: Object.values(fields).map(i => i[0].message).join()
            })
        }
    })

    
}

const {
    table,
    drawer,
    dialog,
    loading,
    active,
    formLabelWidth,
    timer,
    registerNewDeviceForm1,
    registerNewDeviceForm2,
    registerNewDeviceForm3,
    registerNewDeviceForm4
} = toRefs(data)
</script>

<template>
    <div>
        <page-main>
            <List />

            <!-- <el-button type="primary" style="margin-top: 20px;" @click="dialog = true">设备删除</el-button> -->
				
            <!-- <el-drawer
                ref="drawer"   
                v-model="dialog"			
                title="设备删除"
                direction="rtl"
                custom-class="demo-drawer"
                size="80%"
            > -->
            <el-card style="margin-top: 40px;">
                <div class="drawer__content">
                    <!--新设备登记第一步表单1-->
                    <el-form :inline="true" ref="ruleFormRef" :rules="rules"  :model="registerNewDeviceForm1">
                        <!--第一行-->
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="ID：" prop="id">
                                    <el-input  v-model="registerNewDeviceForm1.id" style="width: 200px" placeholder="输入ID" />
                                </el-form-item>
                            </el-col>
                            <el-button type="primary" :loading="loading" @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
                        </el-row>
                    </el-form>
                </div>
            <!-- </el-drawer> -->
            </el-card>
        </page-main>
    </div>
</template>
